<template>
  <div>
    <div class="flex gap-2 flex-col">
      <div
        v-for="(item, key) in form.templateList"
        :key="key"
        class="flex gap-2 justify-between w-full"
      >
        <a-select
          allow-clear
          v-model="item.param"
          :placeholder="t['选择字段']"
          style="width: 160px"
        >
          <a-option v-for="(m, key) in paramOptions" :key="key" :value="m.value">
            {{ t[m.label] || m.label }}
          </a-option>
        </a-select>

        <a-select
          v-model="item.template"
          :placeholder="t['选择模板']"
          style="width: 160px"
          allow-clear
          :options="refTemplateOptions"
        ></a-select>

        <a-button @click="delItem(item.id)">
          <icon-delete />
        </a-button>
      </div>
      <div>
        <a-button @click="add">{{ t["新增"] }}</a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getDict } from "@/api/service/dict/data/dict.data";
import { SelectOptionData } from "@arco-design/web-vue";
import { form, paramOptions, rawParamOptions } from "../form";

const t = translate("公共模块");
const props = defineProps<{
  refTemplateOptions: SelectOptionData;
}>();

const getDictData = async () => {
  paramOptions.value = [...rawParamOptions];
  const data = await getDict("dynamic-fields");
  paramOptions.value = paramOptions.value.concat(data.data as any);
};
const add = () => {
  form.value.templateList.push({
    param: "",
    title: "",
    id: nanoid(),
    template: ""
  });
};

const delItem = (id: string) => {
  form.value.templateList = form.value.templateList.filter((item: any) => item.id !== id);
};
onMounted(() => {
  getDictData();
});
</script>

<style lang="scss" scoped></style>
